<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dir</title>
    <style>
      body {
        font-family: "Microsoft YaHei", sans-serif;
        background: #eef1f5;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px;
      }

      h2 {
        color: #ffffff;
        margin-bottom: 20px;
      }

      .compass-container {
        position: relative;
        width: 400px;
        height: 400px;
      }

      .layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
        transform-origin: center center;
        transition: transform 1s ease;
      }

      .layer img {
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
      }

      .input-box {
        margin-top: 30px;
      }

      input[type="number"] {
        font-size: 18px;
        padding: 6px 12px;
        width: 140px;
        border-radius: 4px;
        border: 1px solid #ffffff;
      }

      button {
        font-size: 16px;
        padding: 6px 14px;
        margin-left: 10px;
        cursor: pointer;
        background: #8b0480;
        color: white;
        border: none;
        border-radius: 4px;
      }

      .result {
        margin-top: 20px;
        font-size: 18px;
        color: #ffffff;
      }
    </style>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: #1c023f;
        color: white;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }

      .header,
      .footer,
      .search-container {
        max-width: 100%;
        box-sizing: border-box;
      }

      * {
        box-sizing: border-box;
      }

      .footer {
        display: flex;
        height: 50px;
        background-color: #1c023f;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-top: auto;
      }

      .header {
        display: flex;
        height: 60px;
        width: 100%;
        background-color: #1c023f;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
      }

      .header h1,
      .header p {
        margin: 0;
      }

      .search-container {
        margin: 10px 20px;
        margin-top: 30px;
        display: flex;
        align-items: center;
      }

      .search-bar {
        background: #392f5a;
        border-radius: 10px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 500px;
        position: relative;
      }

      .search-input {
        background: transparent;
        border: none;
        color: white;
        outline: none;
        flex: 1;
        margin-left: 10px;
        padding: 5px;
      }

      .search-button {
        background: #5b4aa3;
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        padding: 5px 15px;
        margin-left: 10px;
        transition: background-color 0.3s;
      }

      .search-button:hover {
        background: #4a3f8c;
      }

      .button {
        background: rgba(107, 85, 180, 0.7);
        opacity: 0.6;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 12px;
        text-align: center;
        margin: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 200px;
        /* 设置按钮的固定宽度 */
        height: 50px;
        /* 设置按钮的固定高度 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .button:hover {
        background: #5b4aa3;
      }

      .footer svg {
        color: white;
        font-size: 24px;
      }

      .back-btn,
      .location-btn,
      .calendar-btn,
      .moon-btn,
      .data-btn,
      .index-btn {
        margin-right: 10px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.3s;
      }

      .back-btn:hover,
      .location-btn:hover,
      .calendar-btn:hover,
      .moon-btn:hover,
      .data-btn:hover,
      .index-btn:hover {
        opacity: 0.8;
      }

      .location-info {
        flex-grow: 1;
        text-align: right;
        padding: 30px;
      }

      .location-info h1,
      .location-info p {
        margin: 0;
      }

      .button-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* 中心对齐 */
        align-items: center;
        /* 垂直居中对齐 */
        overflow-y: auto;
      }

      .content {
        padding: 20px;
        background: #2e1a5a;
        border-radius: 10px;
        margin: 20px;
        color: white;
        max-width: 800px;
        width: 100%;
        box-sizing: border-box;
      }

      select {
        background: #392f5a;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 8px;
        margin: 10px 0;
        cursor: pointer;
      }

      option {
        background: #392f5a;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <button
        class="back-btn"
        onclick="window.location.href='newcalendar.html'"
      >
        <img
          src="{{ url_for('static', filename='素材/left.png') }}"
          alt="Back"
        />
      </button>
      <div class="location-info">
        <h4 id="location-name">北京</h4>
        <p id="coordinates">116°20'E 39°56'N</p>
      </div>
      <button class="location-btn" onclick="getCurrentLocation()">
        <img
          src="{{ url_for('static', filename='素材/箭头.png') }}"
          alt="Location"
        />
      </button>
    </div>

    <div class="search-container">
      <label for="province-select" style="color: white">选择省市：</label>
      <select id="province-select" onchange="updateLocationFromSelect()">
        <option value="0">请选择省市</option>
        <option value="1">北京市</option>
        <option value="2">上海市</option>
        <option value="3">广州市</option>
        <option value="4">杭州市</option>
        <option value="5">深圳市</option>
        <option value="6">成都市</option>
        <option value="7">重庆市</option>
        <option value="8">武汉市</option>
        <option value="9">南京市</option>
        <option value="10">天津市</option>
        <option value="11">沈阳市</option>
        <option value="12">郑州市</option>
        <option value="13">西安市</option>
        <option value="14">长沙市</option>
        <option value="15">青岛市</option>
        <option value="16">哈尔滨市</option>
        <option value="17">合肥市</option>
        <option value="18">福州市</option>
        <option value="19">南昌市</option>
        <option value="20">兰州市</option>
        <option value="21">拉萨市</option>
        <option value="22">日喀则市</option>
        <option value="23">昌都市</option>
        <option value="24">林芝市</option>
        <option value="25">山南市</option>
        <option value="26">那曲市</option>
        <option value="27">阿里地区</option>
      </select>
    </div>
    <h2>藏历年份图</h2>

    <div class="compass-container">
      <!-- 地支图层（最底） -->
      <div class="layer" id="dizhiLayer">
        <img src="..\static\素材\dizhi.png" alt="地支盘" />
      </div>

      <!-- 天干图层（中间） -->
      <div class="layer" id="tianganLayer">
        <img src="..\static\素材\tiangan.png" alt="天干盘" />
      </div>

      <!-- 指针图层（最上） -->
      <div class="layer" id="needleLayer">
        <img src="..\static\素材\needle.png" alt="指针" />
      </div>
    </div>

    <div class="input-box">
      <input type="number" id="yearInput" value="2025" placeholder="输入年份" />
      <button onclick="calculate()">计算</button>
    </div>

    <div class="result" id="resultText">请输入一个年份</div>
    <script>
      const tiangan = [
        "铁",
        "铁",
        "水",
        "水",
        "木",
        "木",
        "火",
        "火",
        "土",
        "土",
      ];
      const dizhi = [
        "虎",
        "兔",
        "龙",
        "蛇",
        "马",
        "羊",
        "猴",
        "鸡",
        "狗",
        "猪",
        "鼠",
        "牛",
      ];
      const ganzhiList = [];

      for (let i = 0; i < 60; i++) {
        ganzhiList.push(tiangan[(i - 6 + 10) % 10] + dizhi[(i - 2 + 12) % 12]);
      }

      function calculate() {
        const year = parseInt(document.getElementById("yearInput").value);
        if (isNaN(year)) {
          alert("请输入合法的年份！");
          return;
        }

        // 计算索引与角度
        const index = (year + 56 + 60) % 60;
        const tgIndex = index % 10;
        const dzIndex = index % 12;

        const tgAngle = tgIndex * 36 - 54; // 360 / 10
        const dzAngle = dzIndex * 30 + 15; // 360 / 12

        document.getElementById(
          "tianganLayer"
        ).style.transform = `rotate(${-tgAngle}deg)`;
        document.getElementById(
          "dizhiLayer"
        ).style.transform = `rotate(${-dzAngle}deg)`;

        // 指针不旋转，始终指向正上方
        document.getElementById("needleLayer").style.transform = `rotate(0deg)`;

        document.getElementById(
          "resultText"
        ).innerText = `${year} 年是 【${ganzhiList[index]}】年`;
      }
    </script>
    <div id="button-list" class="button-list">
      <!-- 按钮列表将在这里生成 -->
    </div>

    <div id="content" class="content" style="display: none">
      <!-- 内容将在这里显示 -->
    </div>

    <div id="response-container" class="content" style="display: none">
      <!-- AI响应将在这里显示 -->
    </div>

    <div class="footer">
      <button
        class="calendar-btn"
        onclick="window.location.href='newcalendar.html'"
      >
        <img
          src="{{ url_for('static', filename='素材/日历浅色.png') }}"
          alt="calendar"
        />
      </button>
      <button class="moon-btn" onclick="window.location.href='十二宫图.html'">
        <img
          src="{{ url_for('static', filename='素材/可视化浅色.png') }}"
          alt="moon"
        />
      </button>
      <button class="data-btn" onclick="window.location.href='newdata.html'">
        <img
          src="{{ url_for('static', filename='素材/知识浅色.png') }}"
          alt="data"
        />
      </button>
      <button class="index-btn" onclick="window.location.href='newai.html'">
        <img
          src="{{ url_for('static', filename='素材/大模型.png') }}"
          alt="index"
        />
      </button>
    </div>

    <script>
      // 模拟不同省市的经纬度
      // 模拟不同省市的经纬度
      const provinceCoordinates = {
        1: { name: "北京市", lat: 39.9042, lon: 116.4074 }, // 北京市
        2: { name: "上海市", lat: 31.2304, lon: 121.4737 }, // 上海市
        3: { name: "广州市", lat: 23.1291, lon: 113.2644 }, // 广州市
        4: { name: "杭州市", lat: 30.2741, lon: 120.1551 }, // 杭州市
        5: { name: "深圳市", lat: 22.5431, lon: 114.0579 }, // 深圳市
        6: { name: "成都市", lat: 30.5728, lon: 104.0668 }, // 成都市
        7: { name: "重庆市", lat: 29.563, lon: 106.5516 }, // 重庆市
        8: { name: "武汉市", lat: 30.5928, lon: 114.3055 }, // 武汉市
        9: { name: "南京市", lat: 32.0603, lon: 118.7969 }, // 南京市
        10: { name: "天津市", lat: 39.3434, lon: 117.3616 }, // 天津市
        11: { name: "沈阳市", lat: 41.8057, lon: 123.4315 }, // 沈阳市
        12: { name: "郑州市", lat: 34.7466, lon: 113.6254 }, // 郑州市
        13: { name: "西安市", lat: 34.3416, lon: 108.9398 }, // 西安市
        14: { name: "长沙市", lat: 28.2282, lon: 112.9388 }, // 长沙市
        15: { name: "青岛市", lat: 36.0671, lon: 120.3826 }, // 青岛市
        16: { name: "哈尔滨市", lat: 45.8038, lon: 126.5349 }, // 哈尔滨市
        17: { name: "合肥市", lat: 31.8206, lon: 117.2272 }, // 合肥市
        18: { name: "福州市", lat: 26.0753, lon: 119.3064 }, // 福州市
        19: { name: "南昌市", lat: 28.682, lon: 115.8575 }, // 南昌市
        20: { name: "兰州市", lat: 36.0611, lon: 103.8343 }, // 兰州市
        21: { name: "拉萨市", lat: 29.65, lon: 91.1 }, // 拉萨市
        22: { name: "日喀则市", lat: 29.2667, lon: 88.8833 }, // 日喀则市
        23: { name: "昌都市", lat: 31.1367, lon: 97.1786 }, // 昌都市
        24: { name: "林芝市", lat: 29.5946, lon: 94.3613 }, // 林芝市
        25: { name: "山南市", lat: 29.2361, lon: 91.7665 }, // 山南市
        26: { name: "那曲市", lat: 31.48, lon: 92.05 }, // 那曲市
        27: { name: "阿里地区", lat: 32.5, lon: 80.1 }, // 阿里地区
      };

      // 获取当前位置并更新经纬度
      function getCurrentLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            function (position) {
              const latitude = position.coords.latitude;
              const longitude = position.coords.longitude;
              updateLocationInfo(latitude, longitude);
            },
            function (error) {
              alert("无法获取地理位置：" + error.message);
            }
          );
        } else {
          alert("该浏览器不支持地理定位。");
        }
      }

      // 根据经纬度更新显示的位置信息
      function updateLocationInfo(latitude, longitude) {
        // 使用固定小数位的十进制度数格式
        const latStr = `${Math.abs(latitude).toFixed(4)}°${
          latitude >= 0 ? "N" : "S"
        }`;
        const lonStr = `${Math.abs(longitude).toFixed(4)}°${
          longitude >= 0 ? "E" : "W"
        }`;

        document.getElementById("location-name").textContent = "当前位置";
        document.getElementById(
          "coordinates"
        ).textContent = `${lonStr} ${latStr}`;

        // 将新位置存储到 LocalStorage
        localStorage.setItem("locationName", "当前位置");
        localStorage.setItem("coordinates", `${lonStr} ${latStr}`);
      }

      // 根据下拉选择更新省市的经纬度
      function updateLocationFromSelect() {
        const select = document.getElementById("province-select");
        const selectedValue = select.value;

        if (selectedValue != 0) {
          const selectedProvince = provinceCoordinates[selectedValue];
          const latitude = selectedProvince.lat;
          const longitude = selectedProvince.lon;

          // 使用固定小数位的十进制度数格式
          const latStr = `${Math.abs(latitude).toFixed(4)}°${
            latitude >= 0 ? "N" : "S"
          }`;
          const lonStr = `${Math.abs(longitude).toFixed(4)}°${
            longitude >= 0 ? "E" : "W"
          }`;

          document.getElementById("location-name").textContent =
            selectedProvince.name;
          document.getElementById(
            "coordinates"
          ).textContent = `${lonStr} ${latStr}`;

          // 存储位置信息到 localStorage
          localStorage.setItem("locationName", selectedProvince.name);
          localStorage.setItem("coordinates", `${lonStr} ${latStr}`);
        }
      }

      // 可以在页面加载时预设一些默认位置
      window.onload = function () {
        if (
          localStorage.getItem("locationName") &&
          localStorage.getItem("coordinates")
        ) {
          document.getElementById("location-name").innerText =
            localStorage.getItem("locationName");
          document.getElementById("coordinates").innerText =
            localStorage.getItem("coordinates");
        }
      };
    </script>
  </body>
</html>
